<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"	
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<ui:composition  template="../../templates/default.xhtml">

	<ui:define name="title">
		<h:outputText value="#{i18n['app.label.title']}" />
	</ui:define>
	
	<ui:define name="headerLogoTopNav">
		<ui:include src="/templates/includes/header.xhtml" />
	</ui:define>
	
	<ui:define name="content">

		<!-- Small Nav -->
		<div class="small-nav">
			#{i18n['app.label.breadcrumb.profileSetting']}<span>&gt;</span>#{i18n['app.label.breadcrumb.myProfile']}
		</div>
		<!-- End Small Nav -->
		
		<!-- Main -->
		<div id="main">
			<div class="cl">&nbsp;</div>
			
			<!-- Content -->
			<div id="content">
			
				<!-- Box -->
				<div class="box">
					
					<!-- Box Head -->
					<div class="box-head">
						<h2>#{i18n['app.label.box.myProfile']}</h2>
					</div>
					<!-- End Box Head -->

					<h:form id="formUser" enctype="multipart/form-data" >
					<p:growl id="growl" showDetail="true" life="5000" /> 
				
					<!-- Form -->
						<div class="form">
							<p:message  for="formUser" />
							<h:panelGrid width="450px"  id="displayEditPhoto" columns="1" cellpadding="10"  
								cellspacing="10">  
								<p:fileUpload fileUploadListener="#{profileBean.handleFileUpload}" 
										update=":formUser:growl :formUser:photoEdit" 
							            invalidFileMessage="#{i18n['app.label.fileUpload.photo.invalidFileMessage']}"
							            invalidSizeMessage="#{i18n['app.label.fileUpload.photo.invalidSizeMessage']}"
							            mode="advanced"   
							            sizeLimit="#{i18n['app.label.fileUpload.photo.sizeLimit']}"  
							            allowTypes="/(\.|\/)(gif|jpe?g|png|pdf)$/"
							            description="#{i18n['app.label.fileUpload.photo.description']}"
							            required="true"
							            requiredMessage="#{i18n['app.label.fileUpload.photo.requiredMessage']}" 
							            label="#{i18n['app.label.fileUpload.photo.label']}"
							            id="uploadPhotoEdit"
							            auto="true"
							             />  
							    
							     <p:graphicImage  id="photoEdit" cache="true" value="#{profileBean.graphicPhoto}"  /> 
							     
							</h:panelGrid>
							<h:panelGrid width="100%"  id="display" columns="4" cellpadding="10"  
								cellspacing="10"  >  
					  
					            <h:outputText value="#{i18n['person.username']}" />  
					            <h:outputText value=" : " />  
					            <p:inputText style="width:200px;" value="#{profileBean.person.username}" id="username" readonly="true"/>  
					  			<p:message  for="username" />
					  			
					  			<h:outputText value="#{i18n['person.email']}" /> 
					            <h:outputText value=" : " /> 
					            <p:inputText style="width:200px;" value="#{profileBean.person.email}" id="email" readonly="true"/>  
					            <p:message  for="email" />
					            
					  			<h:outputText value="#{i18n['person.firstName']}"  /> 
					  			<h:outputText value=" : " /> 
					            <p:inputText style="width:200px;" value="#{profileBean.person.firstName}" id="firstName"/>
					            <p:message  for="firstName" />
					           
					            <h:outputText value="#{i18n['person.lastName']}" />  
					            <h:outputText value=" : " />
					            <p:inputText  style="width:200px;" value="#{profileBean.person.lastName}" id="lastName"/>
					            <p:message  for="lastName" />
					            <h:outputText value="#{i18n['person.birthDate']}" />  
					            <h:outputText value=" : " />
					            <p:calendar  style="width:200px;" value="#{profileBean.person.birthDate}" id="birthDate" showButtonPanel="true"
										pattern="dd-MM-yyyy"  yearRange="c-50:c+1" navigator="true" readonlyInput="true" 
										maxdate="#{common.todayDate}" /> 
					            <p:message  for="birthDate" />
					            
					            <h:outputText value="#{i18n['person.civility']}" />  
					            <h:outputText value=" : " />
					            <p:selectOneMenu  style="width:200px;"  id="civility"  value="#{profileBean.person.civility}" effect="fade" >  
							            <f:selectItems value="#{enumObject.civilityValues}" var="c" 
    										itemValue="#{c}" itemLabel="#{c.label}"/> 
							        </p:selectOneMenu> 
					  			<p:message  for="civility" />
					            
					            <h:outputText value="#{i18n['roles']}"  /> 
					  			<h:outputText value=" : " /> 
					            <p:dataGrid style="width:200px;" value="#{profileBean.person.securityRoles}" var="role" columns="1"
					            	  id="roles" >
					            	<p:column>  
							               <h:outputText value="#{role.roleDesc}" />  
							        </p:column> 
					            </p:dataGrid>
					            <p:message  for="roles" />
					            
					        </h:panelGrid>  
							
						</div>
						<!-- End Form -->
						
						<!-- Form Buttons -->
						<div class="buttons">
							<p:commandButton type="submit" id="Update"   style="margin-right: 20px;"
								actionListener="#{profileBean.updateUser}" value="#{i18n['btn.update']}"
								icon="ui-icon-arrowrefresh-1-w" ajax="false" />
						</div>
						<!-- End Form Buttons -->
					</h:form>
				</div>
				<!-- End Box -->
				
			</div>
			<!-- End Content -->
			
			<!-- Sidebar -->
			<div id="sidebar">
				<ui:include src="/pages/profile/includes/sidebar.xhtml" />
			</div>
			<!-- End Sidebar -->
			
			<div class="cl">&nbsp;</div>	
			
		</div>
		<!-- Main -->
	</ui:define>
</ui:composition>
</html>